import FactoryNode from "../factory/FactoryNode";

const dowOptions = {
    preserveDimensions: true
}

const connecting = {
    router: {
        name: 'manhattan',
        args: {
            padding: 1,
        },
    },
    connector: {
        name: 'rounded',
        args: {
            radius: 5,
        },
    },
    anchor: 'center',
    connectionPoint: 'anchor',
    allowBlank: false,
    snap: { radius: 20 },
    allowLoop: false,
    highlight: true,
    // 连接线
    createEdge() {
        return FactoryNode.edge.clone()
    },
    validateConnection({ targetMagnet }) {
        return !!targetMagnet
    },
}

function initOptions(el) {
    return {
        container: el,
        width: el.parentNode.clientWidth,
        height: el.parentNode.clientHeight,
        connecting,
        highlighting: {
            magnetAdsorbed: {
                name: 'stroke',
                args: {
                    attrs: {
                        fill: '#5F95FF',
                        stroke: '#5F95FF',
                    },
                },
            },
        },
        // 开启拖拽
        panning: {
            enabled: true,
            modifiers: 'shift',
        },
        // 自由滑动
        // scroller: {
        //     enabled: true,
        //     pannable: true,
        //     pageVisible: true,
        //     pageBreak: false,
        // },
        // 滚轮缩放
        mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
            modifiers: ['ctrl', 'meta'],
            minScale: 0.5,
            maxScale: 3,
        },
        // 节点大小调整功能
        resizing: true,
        rotating: true,
        // 开启键盘快捷键
        keyboard: true,
        // 开启截切版
        clipboard: {
            enabled: true,
            useLocalStorage: true,
        },
        // 开启撤销
        history: true,
        background: {
            color: '#fffbe6', // 设置画布背景颜色
        },
        // 开启选中交互
        selecting: {
            enabled: true,
            rubberband: true,
            showNodeSelectionBox: true,
            showEdgeSelectionBox: true
        },
        // 启用对齐线
        snapline: true,
        grid: {
            size: 10,      // 网格大小 10px
            visible: true, // 渲染网格背景
        },
        // 跟随窗口变动大小
        autoResize: true,
    }
}

const ConfigGraph = {
    dowOptions,
    initOptions
}

export default ConfigGraph